<template>
  <div class="page">
    <div class="header">
      <div class="header-left">
        <div class="platform-info">
          <!-- <div class="logo" :style="{backgroundImage: `url('${tenantInfo.logoPath}')`}"></div> -->
          <img class="logo" :src="tenantInfo.logoPath" alt="">
          <div class="title">{{tenantInfo.title}}</div>
        </div>
        <ul class="nav-list" ref="navList">
          <li
            class="nav-item"
            :class="{active: currNav === item.path}"
            v-for="(item, i) in navList"
            :key="i"
            @click="cutoverNav(item)">{{item.menuName}}</li>
          <div class="nav-line" ref="navLine"></div>
        </ul>
      </div>
      <div class="header-right">
        <div class="header-right-menu">{{userName}}</div>
        <el-dropdown
          @command="handleRouter"
          trigger="hover"
          class='top-right-menu'>
          <div class="iconfont"
            style="color: #22242f;cursor: pointer;font-size: 18px;">&#xe610;</div>
          <el-dropdown-menu slot="dropdown" class='top-right-menu-item'>
            <!-- <el-dropdown-item :command="{ menuName:'账户信息', path: `/system/accountInfo` }">
              <span class='text'>账户信息</span>
            </el-dropdown-item> -->
            <el-dropdown-item :command="{ menuName:'退出', path: 'Login' }">
              <span class='text'>退出</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="main">
      <div class="cont">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'service',
  data () {
    return {
      tenantInfo: {
        title: '',
        logoPath: require('@/assets/img/medchat_logo.png')
      },
      accountId: '',
      navList: [
        {menuName: 'WeChat账号', path: '/system/platformList'},
        {menuName: '租户管理', path: '/system/tenantManage'},
        {menuName: '系统运维', path: '/system/manage'},
        {menuName: '系统应用', path: '/system/app'}
        // {menuName: 'WeChat账号', path: '/system/platformList'},
        // {menuName: '微信授权', path: '/system/platformAuth'},
        // {menuName: '权限管理', path: '/system/authManage'},
        // {menuName: '系统运维', path: '/system/logList'},
        // {menuName: '系统设置', path: '/system/config'}
      ]
    }
  },
  computed: {
    currNav () {
      return this.$route.path
    }
  },
  methods: {
    // ------------ 头部相关 ------------
    cutoverNav (info) {
      this.replaceRoute({path: info.path})
    },
    handleRouter (cmd) {
      if (cmd.path !== 'Login' || cmd.menuName === '退出') {
        this.setMenuName(cmd.menuName)
      }
      if (cmd.path === 'Login' || cmd.menuName === '退出') {
        this.$confirm('是否退出当前用户?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.setMenuName(cmd.menuName)
          this.clearToken()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '退出已取消'
          })
        })
      } else {
        this.linkTo({path: cmd.path})
      }
    },
    // 清除tokan
    clearToken () {
      let url = `/logout`
      let param = {
        token: sessionStorage.getItem('accessToken')
      }
      if (param.token) {
        this.post(url, param).then(res => {
          sessionStorage.clear()
          this.$router.push({name: 'Login'})
        }).catch(err => {
          this.handleError(err)
          sessionStorage.clear()
          this.$router.push({name: 'Login'})
        })
      } else {
        this.$router.push({name: 'Login'})
      }
    },
    // // 获取平台信息
    // initTenantInfo () {
    //   let url = `/org/property`
    //   this.get(url).then(res => {
    //     if (res.data.code === 200) {
    //       let data = res.data.data
    //       if (data) {
    //         this.tenantInfo = data
    //         sessionStorage.setItem('tenantInfo', JSON.stringify(this.tenantInfo))
    //       }
    //     }
    //   }).catch(e => {
    //     this.handleError(e)
    //   })
    // },
    // 获取系统当前账号信息
    getAccountInfo () {
      let url = `${this.SERVICE_SYS}/account/current`
      this.get(url).then(res => {
        if (res.data.code === 200) {
          let data = res.data.data
          if (data) {
            this.accountId = data.userId
            let userName = data.userName
            let empId = data.empId
            sessionStorage.setItem('empId', empId)
            sessionStorage.setItem('accountId', this.accountId)
            sessionStorage.setItem('isAdmin', data.isAdmin)
            this.setUserName(userName)
          }
        }
      })
    },
    initTab () {
      // 刷新时初始化tab选中
      this.$nextTick(() => {
        let index = this.navList.findIndex(item => item.path === this.currNav)
        if (index >= 0) {
          this.$refs.navLine.style.display = 'block'
          let lineWidth = this.$refs.navList.getElementsByClassName('nav-item')[index].getBoundingClientRect().width
          let lineLeft = 0
          let navItemList = this.$refs.navList.getElementsByClassName('nav-item')
          for (let i = 0; i < index; i++) {
            lineLeft += navItemList[i].getBoundingClientRect().width
          }
          this.$refs.navLine.style.width = `${lineWidth}px`
          this.$refs.navLine.style.transform = `translateX(${lineLeft}px)`
        } else {
          this.$refs.navLine.style.display = 'none'
        }
      })
    }
  },
  watch: {
    '$route.name' () {
      this.initTab()
    }
  },
  mounted () {
    this.initTab()
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // window.eventBus.$on('updateLogoInfo', () => {
      //   vm.initTenantInfo()
      // })
      // vm.initTenantInfo()
      vm.getAccountInfo()
    })
  }
}
</script>

<style scoped lang="stylus">
.page
  width 100%
  min-width 1360px
  height 100vh
  background: #F0F2F6
  padded_box(border-box, 60px 0 0)
  position relative
  .header
    width 100%
    min-width 1360px
    height 60px
    background #fff
    display flex
    justify-content space-between
    align-items center
    padded_box(border-box, 0 60px 0 24px)
    position fixed
    top 0
    left 0
    right 0
    .header-left
      height 100%
      display flex
      align-items center
      padded_box(border-box, 0 0 0 70px)
      .platform-info
        height 100%
        display flex
        align-items center
        .logo
          // width 134px
          // height 48px
          // background-repeat no-repeat
          // background-position center
          // background-size contain
        .title
          font-size: 16px;
          font-weight: 700;
          color: #53555E;
          margin-left 24px
      .nav-list
        height 100%
        display flex
        align-items center
        // margin-left 70px
        position relative
        .nav-item
          height 100%
          line-height 60px
          padded_box(border-box, 0 36px)
          font-size 14px
          color #22242F
          cursor pointer
          &.active
            background: rgba(240,242,246,0.5);
            color #4C84FF
        .nav-line
          width 0px
          height: 3px;
          background: #4C84FF;
          border-radius 2px
          position absolute
          bottom 0px
          left 0
          transition: transform .3s cubic-bezier(.645,.045,.355,1);
    .header-right
      height 100%
      display flex
      align-items center
      .header-right-menu
        height 100%
        display flex
        align-items center
        color #595961
        padding 0 10px
        font-size 14px
        vertical-align middle
        position relative
      .top-right-menu
        margin-left 10px
        vertical-align middle
        height 18px
        line-height 18px
        margin-bottom 2px
  .main
    width 100%
    height 100%
    // scroll()
    padded_box(border-box, 10px)
    .cont
      width 100%
      height 100%
      scroll()
.top-right-menu-item
  padded_box(border-box, 6px 0)
  .el-dropdown-menu__item
    min-width 124px
    height 40px
    line-height 40px
    text-align center
    color #61616a
    padded_box(border-box, 0 20px)
    font-size 0
    position relative
    &::after
      content ''
      display inline-block
      width 114px
      height 1px
      background #ECEDF2
      position absolute
      bottom -6px
      left 50%
      transform translate(-50%, 0)
    &:last-of-type::after
      display none
    & + .el-dropdown-menu__item
      margin-top 12px
    &:hover
      background: #EFF2F8;
      color #4C84FF
    &:nth-last-of-type(1)
      border-bottom none
    .iconfont
      margin-right 10px
      vertical-align middle
    .text
      vertical-align middle
      font-size 14px
</style>
